<template>
  <div>
    <el-card class="top-card">
      <div
        class="select-list"
        ref="selectList"
      >
        <div class="select-list-l">
          <el-date-picker
            v-model="currentDate"
            type="month"
            :default-value="new Date()"
            @change="monthChange"
            :clearable="false"
            placeholder="请选择日期"
          >
          </el-date-picker>
          <div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="search"
            >查询
            </el-button>
          </div>
          <div>
            <el-button
              size="mini"
              icon="el-icon-refresh"
              @click="reset"
            >重置
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="table-card">
      <schedule-table
        :selectDate="currentDate"
        :tableData="scheduleList"
        :loading="loading"
        @getTableHeadData="getTableHeadData"
        :storeId="storeId"
        @refreshData="getStaffList"
      ></schedule-table>
    </el-card>
  </div>
</template>

<script>
import ScheduleTable from '../../components/element/schedule/scheduleTable.vue';
import {fetchEmployeeData, fetchScheduleData} from '@/api/index.ts';

export default {
  data() {
    return {
      currentDate: '',
      storeId: '',
      staffList: [],
      scheduleList: [],
      tableHeadData: [],
      currentPage: 1,
      pageSize: 1000,
      loading: false,
      allCompany: []
    };
  },
  components: {
    ScheduleTable
  },
  beforeMount() {
    this.init();
  },
  methods: {
    async init() {
      this.currentDate = new Date();
      await this.getStaffList();
    },
    // 时间切换
    monthChange(date) {
      this.currentDate = date;
      this.getStaffList();
    },
    getTableHeadData(tableHeadData) {
      this.tableHeadData = tableHeadData;
    },
    async getStaffList() {
      this.loading = false;
      let params = {
        pageNum: 1,
        pageSize: 20,
        storeId: this.storeId
      };
      this.scheduleList = [];
      let res = await fetchEmployeeData();
      let employeeList = res.data.records;
      employeeList.forEach(staff => {
        this.scheduleList.push({
          employeeName: staff.fullName,
          employeeId: staff.id,
          colData: []
        });

        let isLessCurrentDay = false; //是否小于当前时间
        let year = this.currentDate.getFullYear();
        let month = this.currentDate.getMonth() + 1;
        let yyyyMM = String(year) + String(month).padStart(2, '0');
        let colDate;//对应当单元格时间
        let currentDay = this.getCurrentDateFormatted(); //当天
        this.scheduleList.forEach((schedule, index) => {
          if (schedule.colData.length < 1) { //没数据
            this.tableHeadData.forEach(item => {
              colDate = yyyyMM + String(item.dayNumber).padStart(2, '0');
              if (colDate < currentDay) {
                isLessCurrentDay = true;
              } else {
                isLessCurrentDay = false;
              }
              if (this.scheduleList[index].colData.length < this.tableHeadData.length) {
                this.scheduleList[index].colData.push({
                      id: '',
                      storeId: staff.storeId,
                      classesDate: '',
                      classesIds: '',
                      classesNames: '空',
                      isLessCurrentDay: isLessCurrentDay,
                      popShow: false,
                      classesList: []
                    }
                );
              }
            });
          }
        });
      })
      this.getScheduleList();
    },
    async getScheduleList() {
      let res = await fetchScheduleData();
      let scheduleList = res.data;
      scheduleList.forEach(record => {
        let day = record.classesDate.slice(-2);
        let modifyIndex;

        this.tableHeadData.forEach((item, index) => {
          if (item.dayNumber == day) {
            modifyIndex = index;
          }
        });

        this.scheduleList.forEach(schedule => {
          if (record.employeeId === schedule.employeeId) {
            if (record.classesIds.indexOf(',') !== -1) {
              record.classesIds = record.classesIds.split(',');
            } else {
              record.classesIds = new Array(record.classesIds);
            }

            schedule.colData[modifyIndex].id = record.id;
            schedule.colData[modifyIndex].storeId = record.storeId;
            schedule.colData[modifyIndex].classesDate = record.classesDate;
            schedule.colData[modifyIndex].classesIds = record.classesIds;
            schedule.colData[modifyIndex].classesNames = record.classesNames;
          }
        });
      })
      console.log(this.scheduleList);
    },
    search() {
      this.getStaffList();
    },
    reset() {
      this.storeId = '';
      this.currentDate = new Date();
    },
    // 获取当天yyyyMMdd数据
    getCurrentDateFormatted() {
      const now = new Date();
      const year = String(now.getFullYear()).padStart(4, '0'); // 获取年份并补零
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 获取月份（注意月份是从0开始的，所以加1），并补零
      const day = String(now.getDate()).padStart(2, '0'); // 获取日期，并补零
      return `${year}${month}${day}`; // 拼接并返回结果
    }
  }
};
</script>

<style scoped lang="scss">
.el-date-editor ::v-deep .el-input__suffix {
  right: 15px;
}
</style>
